import React, { useState, useEffect } from 'react'
import { Form, Input, Col, Table } from 'antd'
import { formLayout } from '@/utils/utils'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {getGoodsList} from '@/services/marketCenter/YHQ'

const GoodsListModal = props => {
  const { form, selectedGoods } = props
  const { getFieldDecorator } = form
  const [allGoodsList, setAllGoodsList] = useState([])
  const [total, setTotalPage] = useState(null)

  const param = {
    isAdmin: 1,
    listStatus: [1],
    page: {orderByField: "", isAsc: ""},
    pageNo: 1,
    pageSize: 10,
  }

  useEffect(() => {
    init(param)
  }, [])
  const init = async (param) => {
    const r_1 = await getGoodsList(param)
    setAllGoodsList(r_1.data)
    setTotalPage(r_1.total)
  }
  // 查询表单逻辑
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      init({
        ...param,
        ...values
      })
    })
  }

  const pagination = {
    total: parseInt(total),
    onChange (page) {
      init({
        ...param,
        pageNo: page,
      })
    }
  }

  const getFields = () => {
    return (<Form layout={formLayout}>
      <Col span={6}>
        <Form.Item label={`商品名称`} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('goodsName', {initialValue: '',})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={6}>
        <Form.Item label={`商品编码`} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`goodsCode`, {initialValue: '',})
            (<Input />)}
        </Form.Item>
      </Col>
    </Form>)
  }

  // 清空查询条件
  const handleReset = () => {
    form.resetFields()
    init(param)
  }
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      selectedGoods(selectedRowKeys, selectedRows)
    }
  }
  const columns_2 = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>  )
      }
    },
    {
      title: '商品图片',
      dataIndex: 'goodsImg',
      render: (v, r, i) => {
        return (
          <img src={v} alt="" style={{width: '35px', height: '35px'}}/>
        )
      }
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '商品编号',
      dataIndex: 'goodsCode',
    },
    {
      title: '价格（元）',
      dataIndex: 'shopPrice',
    },
    {
      title: '库存',
      dataIndex: 'goodsStockNum',
    },
  ]
  return (<>
    <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    <Table size="small" rowKey={record => record.id} pagination={pagination} rowSelection={rowSelection} columns={columns_2} dataSource={allGoodsList}/>
  </>)
}

export default Form.create({})(GoodsListModal)



